<template>
<el-main>
   <div>
    <!-- <input type="text" v-model="key" placeholder="请输入服务" > -->
    <el-input type="text" v-model="key" placeholder="请输入服务" style="width:350px"></el-input>&nbsp;
     <el-button type="info" @click="find()">搜索</el-button>
     <!-- <input type="button" value="返回" @click="reload()"> -->
     <br><br>
    <el-button type="primary" @click="reload()">返回</el-button>&nbsp;&nbsp;&nbsp;
    <el-button type="success" @click="addservice()">添加服务</el-button>
    <br><br>
    <el-table
      :data="tableData"
      height="550"
      border
      style="width: auto">
        <el-table-column
        prop="community.name"
        label="服务小区"
        width="170"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="服务名称"
        width="140"
        align="center">
      </el-table-column>
      <el-table-column
        prop="introduce"
        label="服务介绍"
        width="170"
        align="center">
      </el-table-column>
      <el-table-column
        prop="supportTime"
        label="服务时间"
        width="160"
        align="center">
      </el-table-column>
            <el-table-column
        prop="price"
        label="价格"
        width="80"
        align="center">
      </el-table-column>

      <el-table-column
        label="操作"
        width="220"
        align="center">
        <!-- slot-scope="scope" -->
        <template slot-scope="scope"> 
          <!-- type里的选项只是颜色 -->
          <!-- 这些方法用于打开对话框，名字要和真正实现的方法，事件名区分 -->
          <el-button type="success" size="mini" @click="info(scope)">查看</el-button>
          <!-- <el-button type="warning" size="mini" @click="update(scope)">修改</el-button> -->
          <el-button type="danger" size="mini" @click="del(scope)">删除</el-button>
                   
        </template>
      </el-table-column>
    </el-table>
            <!-- 详情对话框 -->
        <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="50%">
     <detail :current="current" @close="close"></detail>
    </el-dialog>
        <!-- 删除失败提示框 -->
        <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      width="30%">
      <span>有相关订单，不能删除</span>
    <el-button type="primary" @click="closedel()">确 定</el-button>
    </el-dialog>

    </div>
</el-main>
   
</template>
<script>
import detail from './Merchantservicedetail.vue'
export default {
           data() {
           return{
           tableData:[], 
           key:"",
           serviceItem:{
           
           },
            current:{},
            dialogVisible:false,
            dialogVisible2:false,

      }
    },
        methods:{
        closedel:function(){
           this.dialogVisible2=false
        },
              //查看详情
      info:function(scope){
        // scope.$index  获取当前第几个元素被点击了
        // scope.row 获取当前行的数据
        console.log(scope.row)
        this.current = scope.row       
        // 显示对话框
        this.dialogVisible = true
      },
          close:function(){
         this.dialogVisible = false
      },
      //搜搜
      find:function(){
        // alert(this.key)
      this.$axios.get("http://localhost:8080/merchant/findservicebyintroduce/"+this.key).then(res=>{
        if(res.data.status=="SUCCESS"){
          console.log("开心，查到了")
          this.tableData=res.data.data
          // this.tableData=JSON.parse(JSON.stringify(this.tableData))  

        }
      })
      },
      del:function(scope){
        this.serviceItem=scope.row
       
      this.$axios.post("http://localhost:8080/serving/del",this.serviceItem).then(res =>{
      if(res.data.status=="SUCCESS"){
     this.tableData.splice(scope.$index,1)
         }else{
          // alert("有相关订单未完成")
          this.dialogVisible2=true
         }
        
      })
      },
      reload:function(){
       this.$axios.get("http://localhost:8080/merchant/findallservice/"+JSON.parse(window.sessionStorage.getItem("user")).id).then(res =>{
        console.log("重新加载") 
        this.tableData = res.data.data
        
      })
      },
      addservice:function(){
        this.$router.push("addservice")
      }
    },
    components:{
      detail,
    },
    mounted(){
        console.log("用户信息："+JSON.parse(window.sessionStorage.getItem("user")))
        console.log("用户id："+JSON.parse(window.sessionStorage.getItem("user")).id)
        this.$axios.get("http://localhost:8080/merchant/findallservice/"+JSON.parse(window.sessionStorage.getItem("user")).id).then(res =>{
         console.log(res.data)//ResponseResult
        console.log(res.data.data)  
        this.tableData = res.data.data
        
      })
    }
}
</script>
<style>
</style>